<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

        <title> {% block title %} 나만의 사전! 이 세상 하나뿐인 당신만의 단어를 만드세요. {% endblock %} </title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

		<link rel="stylesheet" href="/site_media/css/elastic.css" type="text/css" media="all" />

		<script src="/site_media/js/jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>

		<script src="/site_media/js/elastic/elastic.js" type="text/javascript" language="javascript" charset="utf-8"></script>

        <link rel="stylesheet" type="text/css" media="all" href="/site_media/css/style.css" />	

        <script type="text/javascript" src="/site_media/js/jquery-ui-1.7.2.custom.min.js"></script>

        <link type="text/css" href="/site_media/css/jquery_ui/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" media="screen" />	

		<script type="text/javascript">

		$(document).ready(function () {

		    $("#word_meaning_reg_form").hide();
		    $("#spinner").hide();
		    $('#spinner').ajaxStart(function(){$(this).show();}).ajaxStop(function(){$(this).hide();}); 

		    $("#skey_btn").click(function () {
		    	$.getJSON("/mydict/search/", {"skey":$("#skey_val").val()},
			        function(data){
			          $.each(data, function(i,item) {
			            $("#meanings").children().each(function() { $(this).remove(); }); // clear all meanings
			          	if (typeof(item.fields) == "undefined") {
			         		$("#pk").val(item.pk);
							$('<div class="new_item">여러분의 의미를 남겨 주세요<\/div>').appendTo("#meanings");
			         	} else {
			          		$("#pk").val(item.fields.word);
			          		$('<div class="new_item">' + item.fields.meaning + '<\/div>').appendTo("#meanings");
			            }
            			// $("<img/>").attr("src", item.media.m)
            			// if ( i == 3 ) return false;
          			});
        		});
        		$("#word_meaning_reg_form").show("bounce");
		    });

            function getNewMeaningData() {
            	if (Number( $("#pk").val() ) > 0) {
            		return { word_id: $("#pk").val(), word: $("#skey_val").val(), meaning: $("#word_meaning").val() };
            	} else {
	                return { word: $("#skey_val").val(), meaning: $("#word_meaning").val() };
	            }
            }
            
		    $("#mydict_reg_btn").click(function () {
		    	$.post("/mydict/create/", getNewMeaningData(),
                    function(data, textStatus) {
                        alert(textStatus); // John
                }, "json");
		    });
		    
		});
		
		$( document ).ajaxStart( function() {
        	$( '#spinner' ).show();
		}).ajaxStop( function() {
        	$( '#spinner' ).hide();
		});
		</script>

        {% block extra_head %} 

        {% endblock %}
	</head>

	<body>

		<div class="header-bar">
			-------------------------- header ----------------------------------
		</div>

		<div class="unit position-header">
			<div class="container">
				<input type="hidden" id="pk" />
				<input type="text" id="skey_val" width="60" />
				<input type="button" id="skey_btn" value="단어 검색" />
				<hr/>
			</div>

		</div>
		
		<div class="unit position-body">
			{% block top_content %} {% endblock %}
		</div>
		
		<div class="unit position-body">
			<p> <!== 이곳운 구분하기 위한 공간입니다. --> </p>
		</div>
		
		<div class="unit position-body">
			{% block middle_content %} {% endblock %}
		</div>
		
		<div class="unit position-body">
			<p> <!== 이곳운 구분하기 위한 공간입니다. --> </p>
		</div>
		
		<div class="unit position-body">
			{% block bottom_content %} {% endblock %}
		</div>

		<div class="unit columns position-footer">
			<div class="container">
				<div class="column">회사 소개</div>
				<div class="column">저작권</div>
				<div class="column">About</div>
			</div>
		</div>

		<div class="unit horizontal-center" style="width:950px;">
			<div class="display header"></div>
			<div class="unit">
				<p></p>
			</div>
			<div class="columns layout">
				<div class="column elastic display body"></div>
			</div>
			<div class="display footer"></div>
		</div>
		
    </body>
</html>
